<template>
    <a-modal :title="$t('故障切换')" v-model='isShow' :maskClosable='false' v-dragModal :width="760">
        <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol"
            labelAlign="left">
            <a-spin :spinning="loading" style="width: 100%;">
                <a-alert v-if="tipContent == false && picContent == true && connect_health == true"
                    :message="$t('将对远端集群对应块进行一次快照，并同步至本地。切换后，数据以本地为主，并同步至远端，是否继续切换操作？')" type="warning" show-icon
                    class="alertstyle" />
                <a-alert v-else-if="tipContent == false && picContent == false && connect_health == true"
                    :message="$t('将对远端集群对应块进行一次快照，并同步至本地。切换后，数据以本地为主，并覆盖远端读写，是否继续切换操作？')" type="warning" show-icon
                    class="alertstyle" />

                <a-alert v-else-if="tipContent == false && picContent == true && connect_health == false"
                    :message="$t('远端集群异常，将立即进行切换。切换后，数据以本地为主，并同步至远端。远端集群恢复后，数据将覆盖同步至远端。是否继续切换操作？')" type="warning"
                    show-icon class="alertstyle" />
                <a-alert v-else-if="tipContent == false && picContent == false && connect_health == false"
                    :message="$t('远端集群异常，将立即进行切换。切换后，数据以本地为主，并覆盖远端读写。远端集群恢复后，数据将覆盖同步至远端。是否继续切换操作？')" type="warning"
                    show-icon class="alertstyle" />

                <a-alert v-else-if="tipContent == true && logContent == true"
                    :message="$t('切换后，数据以本地为主，并同步至远端，是否继续切换操作？')" type="warning" show-icon class="alertstyle" />
                <a-alert v-else-if="tipContent == true && logContent == false"
                    :message="$t('远端集群异常，切换后，数据以本地为主，并覆盖远端读写，远端集群恢复后，数据将覆盖同步至远端。是否继续切换操作？')" type="warning" show-icon
                    class="alertstyle" />

                <a-form-model-item :label="$t('本地集群admin账户密码') + ':'" prop="local_passwd" class="ml-32">
                    <a-input-password style="width: 384px;" v-model="form.local_passwd" :placeholder="$t('Enter')" />
                </a-form-model-item>
                <a-form-model-item :label="$t('远端集群admin账户密码') + ':'" prop="remote_passwd" class="ml-32">
                    <a-input-password style="width: 384px;" v-model="form.remote_passwd" :placeholder="$t('Enter')" />
                </a-form-model-item>

            </a-spin>
        </a-form-model>

        <template slot="footer">
            <a-button @click="handleClose">{{ $t('Cancel') }}</a-button>
            <a-button type='primary' @click="handleCreate">{{ $t('确认切换') }}</a-button>
        </template>

    </a-modal>
</template>

<script>
import { encrypt } from '../../../untils/aes.js'

export default {
    props: {
        picContent: Boolean,
        logContent: Boolean,
        tipContent: Boolean
    },
    data() {
        return {
            isShow: false,
            timer: null,
            labelCol: { span: 6 },
            wrapperCol: { span: 17 },
            form: {
                local_passwd: '',
                remote_passwd: '',
                image_name: '',
                pool_name: '',
            },
            rules: {
                local_passwd: [
                    { required: true, message: this.$t('Enter') + this.$t('本地集群admin账户密码'), trigger: 'blur' },
                ],
                remote_passwd: [
                    { required: true, message: this.$t('Enter') + this.$t('远端集群admin账户密码'), trigger: 'blur' },
                ],

            },
            loading: false,
            connect_health: false
        };
    },
    methods: {
        handleCreate() {
            this.$refs.ruleForm.validate(async valid => {
                if (valid) {
                    const params = {
                        local_passwd: encrypt(this.form.local_passwd),
                        remote_passwd: encrypt(this.form.remote_passwd),
                        image_name: this.form.image_name,
                        pool_name: this.form.pool_name,
                    }
                    this.loading = true
                    const { data } = await this.$api.data.changeBlockStorageApi(params)
                    this.model(data.id) //返回模板
                    this.notice(data.id, data.params, data.flag) //通知列表显示
                    if (data.flag == '0') {
                        this.$emit('get-list')
                        this.handleClose()
                    }
                    this.loading = false
                } else {
                    return false;
                }
            });
        },
        handleClose() {
            this.$refs['ruleForm'].resetFields();
            this.isShow = false
        },
    }
}
</script>

<style scoped>
.alertstyle {
    width: 550px;
    margin-left: 32px;
}
</style>